<template>
  <div>
    <h1>hello vue</h1>
    <!-- 传递数据给子组件，把子组件中props定义的变量当成组件标签的属性使用，
    并通过这些属性把值传递给子组件 -->
    <!-- 
      总结
      组件通信父传子
        1、子组件内，props定义变量，在子组件中使用变量
        2、父组件内，使用子组件，属性方式给props变量传值
     -->
    <myProduct title="超级好吃的口水鸡" price="50" :info="msg"></myProduct>
    <myProduct
      title="牛肉火锅"
      price="99"
      info="今日特价，只要九块九！"
    ></myProduct>
  </div>
</template>

<script>
import myProduct from "./组件通信/myProduct.vue";
export default {
  components: {
    myProduct,
  },
  data() {
    return {
      msg: "开业大酬宾，全场8折！",
    };
  },
};
</script>

<style>
</style>